<template>
    <el-form :inline="true" class="form-width">
        <el-form-item 
        label-width="100px"
        label="显示漏斗">
            <el-select v-model="value1" class="m-2">
                <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
            </el-select>
        </el-form-item>
        <el-form-item class="form-button">
            <el-button type="primary">创建漏斗</el-button>
        </el-form-item>
        <div>
            <el-form-item label="按" label-width="100px">
                <el-space>
                    <el-select v-model="value2" class="m-2">
                        <el-option
                        v-for="item in options2"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        />
                    </el-select>
                    <span>计算</span>
                </el-space>
            </el-form-item>
        </div>
    </el-form>
    <el-form class="condition-box" inline="true">
        <el-form-item>
            <el-checkbox-group v-model="checkedConditions" :min="1" :max="3">
                <el-checkbox v-for="condition in conditions" :key="condition" :label="condition">{{
                condition
                }}</el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item>
            <el-button type="primary">查询</el-button>
        </el-form-item>
    </el-form>
    <div class="time-table">
        <!-- <el-space direction="vertical" style="width: 100%;" alignment="normal"> -->
            <DatePicker></DatePicker>
            <DataChartVue></DataChartVue>
        <!-- </el-space> -->
    </div>
</template>

<script setup>
import { ref } from 'vue'
import DatePicker from '@/components/DatePicker.vue';
import DataChartVue from '@/components/DataChart1.vue';
const value1 = ref('')
const value2 = ref('')
const options1 = [
  {
    value: '购买',
    label: '购买',
  },
  {
    value: '浏览',
    label: '浏览',
  },
  {
    value: '支付',
    label: '支付',
  },
]

const options2 = [
{
    value: '人数',
    label: '人数',
  },
  {
    value: '交易额',
    label: '交易额',
  },
  {
    value: '成交商品数',
    label: '成交商品数',
  },
]

const checkedConditions = ref(['浏览商品', '购买'])
const conditions = ['浏览商品', '购买', '注册', '登录']

</script>

<style>

.form-width {
    padding: 10px;
}

.form-button {
    margin-left: 200px;
}

.time-table {
    margin-top: 20px;
    margin-bottom: 20px;
    /* height: 100%; */
}

.condition-box {
    padding-top: 10px;
    margin-top: 20px;
    padding-left: 100px;
}

.condition-box el-form-item {
    margin-top: 20px;
}

.condition-box, .time-table,.form-width {
    background-color: #FFFFFF;
}
</style>